<template class="tem">
  <div class="root">
    <!-- 头部 -->
    <div class="head">
      <div class="headcontent">
        <span>项目名称:</span>
        <el-input placeholder="请输入内容" v-model="form.departmentName" clearable>
        </el-input>
        <el-button type="primary" class="select" @click="Fuzzyquery">查询</el-button>
        <el-button type="primary" class="add" @click="dialogFormVisible = true"
          >添加</el-button
        >
      </div>
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table border :data="tabadata" style="width: 100%">
        <el-table-column prop="did" label="科室id" width="180">
        </el-table-column>
        <el-table-column prop="departmentName" label="科室名称" width="180">
        </el-table-column>

        <el-table-column prop="departmentNumber" label="科室编号" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

      <!-- 弹框 from -->
      <el-dialog
        title="添加检查项目"
        :visible.sync="dialogFormVisible"
        style="padding: 0 0 0 0; width: 50%; margin: 0 auto"
      >
        <el-form :model="form">
          <!-- <el-form-item label="科室ID" :label-width="formLabelWidth">
            <el-input
              v-model="form.did"
              autocomplete="off"
              style="width: 84%"
            ></el-input>
          </el-form-item> -->
          <el-form-item
            label="创建时间"
            :label-width="formLabelWidth"
            size="medium"
          >
             <el-input
              v-model="form.createTime"
              autocomplete="off"
              style="width: 84%"
            ></el-input>
          </el-form-item>
          <el-form-item label="编辑时间" :label-width="formLabelWidth">
            <el-input
              v-model="form.updateTime"
              autocomplete="off"
              style="width: 84%"
            ></el-input>
          </el-form-item>
          <el-form-item label="科室名称" :label-width="formLabelWidth">
            <el-input
              v-model="form.departmentName"
              autocomplete="off"
              style="width: 84%"
            ></el-input>
          </el-form-item>
          <el-form-item label="科室编号" :label-width="formLabelWidth">
            <el-input
              v-model="form.departmentNumber"
              autocomplete="off"
              style="width: 84%"
            ></el-input>
          </el-form-item>
             <el-form-item label="医院ID" :label-width="formLabelWidth">
            <el-input
              v-model="form.hid"
              autocomplete="off"
              style="width: 84%"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <!-- dialogFormVisible = false -->
          <el-button type="primary" @click="installdatas"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <!-- 修改数据 -->
      <el-dialog title="修改信息" :visible.sync="umdateForemVible"  style="width:60% ;margin:0 auto">
          <el-form :model="uodatafrm">
            <el-form-item label="科室名称" :label-width="formLabelWidth"   style="margin-right:10%">
              <el-input v-model="uodatafrm.departmentName" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="科室编号" :label-width="formLabelWidth" style="margin-right:10%">
              <el-input v-model="uodatafrm.departmentNumber" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="umdateForemVible = false">取 消</el-button>

            <el-button type="primary" @click="updatedataasync">确 定</el-button>
          </div>
      </el-dialog>

      <!-- 修改数据 -->


    <!-- 分页 -->
    <div class="page">
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="  prev, pager, next, jumper,->,sizes,total"
        :total="400"
      >
      </el-pagination> -->
    </div>
  </div>
</template>

<script>
import { getList,delatedata,insertdata,updatedata } from "@/api/department/departmentfile";
export default {
  name: "project",
  data() {
    return {
      projectname: "",
      tabadata: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      umdateForemVible:false,
      formLabelWidth: "100px",

        // 添加的数据
      form: {

        createTime:'',//创建时间
        updateTime:'',//修改时间
        departmentName:'',//科室名称
        departmentNumber:'',//科室编号
        hid:''//医院id
      },

      // 修改的数据
        uodatafrm:{
          did:"",//科室id
          departmentName:"",//科室名称
          departmentNumber:""//科室编号
        }
    };
  },

  methods: {
    // 列表渲染
    async getList() {
      const resovle = await getList();
      // console.log(resovle);
      if (resovle.code != 200) {
        return new Promise.reject(new Error("this error"));
      } else {
        const { data } = resovle;
        // console.log(data);
        this.tabadata = data;
        return "ok";
      }
    },
    // =========================================
    // 数据删除
   async handleDelete(index,rowdata){
       console.log(rowdata.did);
       if(rowdata.did ==undefined && rowdata.did == null && rowdata.did == ""){
          this.$message.error('错了哦');
       }else{
         const itemdata =  await delatedata(rowdata.did)
           this.getList();
            this.$message({
                message: '成功哦',
                type: 'success'
          });
       }

   },
  // ===========================================
  //数据添加
  async installdatas(){
   this.dialogFormVisible = true
    console.log(this.form);
     const insertitem =  await insertdata(this.form)
    // console.log(insertitem);
    if(insertitem.code != 200){
       this.$message.error('错了哦');
      return new Promise.reject(new Error("this insertitem Error"))
    }else{
        this.$message({
          message: '成功哦',
          type: 'success'
        });
        this.form = {}
        this.dialogFormVisible = false
        this.getList();
      return 'ok'
    }

  },
  // 数据修改
  handleEdit(index,rowdata){
    this.umdateForemVible = true
      //console.log(index,rowdata);
    this.uodatafrm.did = rowdata.did
    this.uodatafrm.departmentName = rowdata.departmentName    //科室名称
    this.uodatafrm.departmentNumber = rowdata.departmentNumber //科室编号
  },

  async updatedataasync(){
        try {
          const updatedataas = await updatedata(this.uodatafrm)
          if(updatedataas.code == 200){
                this.$message({
                  message: '成功哦',
                  type: 'success'
                });
                this.umdateForemVible = false
               this.getList();
            return "ok"
          }
        } catch (error) {
          return new Promise.reject(new Error("this updatedataas error "))
        }
  },

// 模糊查询
async Fuzzyquery(){
 //const abc =  await tolist(this.departmentName)
 //console.log(abc);
    try {
          let opp =this.form.departmentName.trim()
      let abc =  await getList(opp)
      console.log(abc);
      if(abc.code == 200){
          this.tabadata =  abc.data
        return "ok"
      }
    } catch (error) {
      new Promise.reject(new Error("this abc error "))
    }
}



  },
  mounted() {
    // 列表渲染
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
// 根标签
.root {
  margin-left: 30px;
  margin-right: 30px;
  min-width: 565px;
}

// 头部
.root .head {
  min-width: 300px;
  margin: 0 auto;
  margin-top: 20px;
  width: 100%;
  height: 61px;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px #d8dce5;
}

.root .head .headcontent span {
  margin-left: 3px;
  margin-right: 3px;
}
.root .head .headcontent .el-input {
  width: 20%;
  margin-top: 14px;
  margin-right: 2px;
}

.root .head .headcontent .add {
  float: right;
  margin-top: 14px;
  margin-right: 5px;
}

.root .table {
  margin-top: 20px;
  width: 100%;
}

.root .page {
  text-align: center;
}
</style>
